<script setup>
import Header from '@/components/header/Header.vue';
import Tab from './components/Tab.vue';
import Card from './components/Card.vue';
import ConvenienceOrderCard from './components/ConvenienceOrderCard.vue';
import HaishuaCard from './components/HaishuaCard.vue';
import PandaCard from './components/PandaCard.vue';
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import api from '@/api/index.js';
import { useKeepalive } from '@/hooks/useKeepalive.js';
defineOptions({
  name: 'OrderList',
});

const needSaveRoute = [
  'scenicOrderDetail',
  'pandaOrderDetail',
  'scenicDetail',
  'hotelDetail',
];
const { scrollYEle } = useKeepalive(needSaveRoute, 'OrderList');

const list = ref([]);
const error = ref(false);
const loading = ref(true);
const finished = ref(true);
const refreshing = ref(false);
const totalCount = ref(0);
const route = useRoute();

const type = 'mall';

let getOrderList = null;
const title = ref('');
const initPage = () => {
  getOrderList = api.getMallOrderList;
  title.value = '便民服务订单';
};
initPage();

const params = {
  pageNum: 1,
  pageSize: 10,
};
const ordinaryFinished = ref(false);
const _getOrderList = () => {
  error.value = false;
  loading.value = true;
  // 订单状态 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消 11 订单异常

  api.getConvenienceOrderList(params)
    .then((res) => {
      list.value = [...list.value, ...res.data.records];
      if (res.data.records < params.pageSize) {
        finished.value = true;
      }
      totalCount.value = list.value.length;
      params.pageNum += 1;
      ordinaryFinished.value = false;
      loading.value = false;
      refreshing.value = false;
      console.log('getOrderList resp');
    })
    .catch(() => {
      error.value = true;
      loading.value = false;
    })
    .finally(() => {
      refreshing.value = false;
      loading.value = false;
    });

};

// 普通订单 订单状态:0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退
// 熊猫订单 订单状态 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消

const onLoad = () => {
  console.log('onLoad');
  loading.value = true;
  finished.value = false;
  _getOrderList();
};
onLoad();

const onRefresh = () => {
  loading.value = true;
  resetting();
};

const resetting = () => {
  params.pageNum = 1;
  list.value = [];
  ordinaryFinished.value = false;
  onLoad();
};

const changeTab = (key) => {
  loading.value = true;
  params.status = key;
  resetting();
};

watch(error, (val) => {
  if (!val) {
    loading.value = true;
    resetting();
  }
});

const isShowVanList = computed(() => {
  if (list.value.length) {
    return true;
  }
  if (loading.value || refreshing.value) {
    return true;
  }
  if (error.value) {
    return true;
  }
  return false;
});

// 刷新页面数据
const cancelOrderResetting = () => {
  resetting();
};
</script>

<template>
  <div class="order">
    <Header :title="title" :back="true" path="/mine" />
    <Tab type="convenience" @changeTab="changeTab" />
    <div class="content" ref="scrollYEle">
      <van-pull-refresh
        class="van_pull_refresh"
        v-model="refreshing"
        @refresh="onRefresh"
      >
        <van-list
          v-if="isShowVanList"
          v-model:loading="loading"
          v-model:error="error"
          :finished="finished"
          finished-text="没有更多了"
          error-text="出错了，点击重试"
          @load="onLoad"
        >
          <ConvenienceOrderCard
            class="list"
            v-for="item in list"
            :key="item"
            :data="item"
            @cancelOrderResetting="cancelOrderResetting"
            :type="type"
          />
        </van-list>

        <div v-else>
          <div class="none">
            <img
              class="none_img"
              src="@/assets/images/index/none1.png"
              alt=""
            />
            <span>暂无订单信息，去逛逛</span>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<style scoped lang="scss">
.order {
  display: flex;
  flex-direction: column;
  height: 100%;

  .content {
    flex: 1;
    background: #f9f8f3;
    overflow-y: auto;
    padding-top: 1.5rem;

    .van_pull_refresh {
      min-height: 100%;

      .list {
        margin: 0 1.5rem 1.5rem 1.5rem;
      }

      .none {
        display: flex;
        flex-direction: column;
        align-items: center;

        .none_img {
          width: 6rem;
          margin: 14.4rem 0 1rem 0;
        }

        span {
          font-size: 1.4rem;
          color: #666666;
        }
      }
    }
  }
}
</style>
